<template>
	<view>
		<image src="/static/home/bg@2x.png" class="pagebg" mode=""></image>
		<view class="con">
			<u-status-bar></u-status-bar>
			<view class="con__top">
				<view class="u-flex u-flex-between u-flex-y-center">
					<view class="u-flex u-flex-items-end">
						<view class="con__top__title">
							运动
						</view>
						<image src="/static/home/cxcf.png" class="con__top__titlebg" mode=""></image>
					</view>
					<image src="/static/home/ts.png" class="con__top__ts" mode=""></image>
				</view>
				<view class="con__top__tip">
					要把努力当成你的一种习惯，而不是一时热血
				</view>
			</view>
			<view class="con__tbox">
				<view class="">
					<view class="con__tbox__l">
						<view class="con__tbox__l__line">

						</view>
						<view class="">
							<view class="u-flex u-flex-y-center">
								<view class="con__tbox__l__text">
									体重记录
								</view>
								<view class="con__tbox__l__btn" @click="show2=true">
									更新
								</view>
							</view>
							<view class="u-flex u-flex-items-end" style="margin-top: 10rpx;">
								<image src="/static/home/tz.png" class="con__tbox__l__icon" mode=""></image>
								<view class="con__tbox__l__num">
									{{Math.floor(tz)}}
									<text class="con__tbox__l__num__xs">.{{parseFloat(tz.toString().split(".")[1])}}</text>
								</view>
								<view class="con__tbox__l__unit">
									kg
								</view>
							</view>
						</view>
					</view>
					<view class="con__tbox__l mt30">
						<view class="con__tbox__l__line bgafd">

						</view>
						<view class="">
							<view class="u-flex u-flex-y-center">
								<view class="con__tbox__l__text">
									今日喝水
								</view>
								<view class="con__tbox__l__btn" @click="show1=true">
									喝水
								</view>
							</view>
							<view class="u-flex u-flex-items-end" style="margin-top: 10rpx;">
								<image src="/static/home/hs.png" class="con__tbox__l__icon" style="width: 18rpx;"
									mode=""></image>
								<view class="con__tbox__l__num">
									{{sl}}
								</view>
								<view class="con__tbox__l__unit">
									ml/1.5L
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <arprogress :percent="25" bgColor='transparent'
					activeColor='#0574f7' inactiveColor='#f3f5f6' borderWidth='24' width='232'>
					<view class="con__tbox__r">
						<view class="u-flex u-flex-items-end">
							<view class="con__tbox__r__num">
								2
							</view>
							<view class="con__tbox__r__num1">
								/7分钟
							</view>
						</view>
						<view class="con__tbox__r__text">
							今日锻炼
						</view>
					</view>
				</arprogress> -->
				<cCircle :width="184" :percent="25" :direction='180' :borderWidth="24" defaultColor='#F6F8F9' circleColor='#0575f8'>
					<view class="con__tbox__r" slot='content'>
						<view class="u-flex u-flex-items-end">
							<view class="con__tbox__r__num">
								2
							</view>
							<view class="con__tbox__r__num1">
								/7分钟
							</view>
						</view>
						<view class="con__tbox__r__text">
							今日锻炼
						</view>
					</view>
				</cCircle>
			</view>
			<view class="con__title">
				我的锻炼
				<image src="/static/home/set.png" class="con__title__icon" mode=""></image>
			</view>
			<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap">
				<view class="con__dlbox" v-for="(item,index) in list" :key="index">
					<view class="con__dlbox__bg">

					</view>
					<view class="con__dlbox__title">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="con__title" style="margin-top: 8rpx;">
				训练方案
				<image src="/static/home/add.png" class="con__title__icon" style="height: 32rpx;" mode=""></image>
			</view>
			<view class="con__xlbox" v-for="(item,index) in 2" :key="index">
				<image :src="'/static/home/t'+(index+1)+'.png'" class="con__xlbox__icon" mode=""></image>
				<view class="" style="flex: 1;">
					<view class="con__xlbox__name">
						肩膀撕裂者运动
					</view>
					<view class="con__xlbox__time">
						2023-06-07
					</view>

				</view>
				<image src="/static/home/more.png" class="con__xlbox__more" mode=""></image>
			</view>
			<view class="u-flex u-flex-xy-center" style="padding: 64rpx 0 27rpx;">
				<image src="/static/home/btbg.png" class="btbg" mode=""></image>
			</view>
		</view>
		<u-popup :show="show" zIndex='20000000' mode="center" bgColor='transparent'>
			<view class="popbox">
				<image src="/static/home/gbg.png" class="popbox__bg" mode=""></image>
				<image src="/static/home/cdzs.png" class="popbox__bg1" mode=""></image>
				<image src="/static/home/popbg.png" class="popbox__bg2" mode=""></image>
				<image src="/static/home/zs.png" class="popbox__bg3" mode=""></image>
				<view class="popbox__con">
					<view class="popbox__con__title">
						活动内容
					</view>
					<scroll-view scroll-y="true" class="popbox__con__content">
						<view>
							1.训练时间为期30天，每周2/4/6，</br>8:00-9:00，共15节课</br>
							2.会根据学员情况对课程內容进行调整，课程包含核心训练、抗阻力训练体能训练、柔韧性训练等内容穿插进行</br>
							3.训练营开始后中途不得加入</br>
							4.训练营全程实时监督，对全勤、减脂冠军学员进行奖励满勤奖励200元现金总减脂冠军500元现金</br>
							5.女性学员训练营期间有两次请假机会
						</view>
					</scroll-view>
					<view class="popbox__con__btn">
						查看活动
					</view>
					<image @click="show=false" src="/static/home/gb.png" class="popbox__con__cha" mode=""></image>
				</view>

			</view>
		</u-popup>
		<!-- 喝水 -->
		<u-popup mode='bottom' @close='show1=false' :show="show1" round="30rpx">
			<view class="popbox1">
				<view class="con__title">
					此次喝水量
				</view>
				<x-calliper :scrollLeft='sl' :scrollEnd='1500' @scroll='scroll'></x-calliper>
				<view class="con__top__tip" style="text-align: center;">
					<text style="font-size: 40rpx;font-weight: bold;">{{scrollLeft}}</text>ml
				</view>
				<view class="" style="padding: 20rpx 60rpx;">
					<u-button @click="show1=false" text="确定" color="#007aff"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 喝水 -->
		<u-popup mode='bottom' @close='show2=false' :show="show2" round="30rpx">
			<view class="popbox1">
				<view class="con__title">
					当前体重
				</view>
				<x-calliper :isInt='false' :scrollStart='20' :scrollLeft='tz' :scrollEnd='200' @scroll='scroll'></x-calliper>
				<view class="con__top__tip" style="text-align: center;">
					<text style="font-size: 40rpx;font-weight: bold;">{{scrollLeft}}</text>kg
				</view>
				<view class="" style="padding: 20rpx 60rpx;">
					<u-button @click="show2=false" text="确定" color="#007aff"></u-button>
				</view>
			</view>
		</u-popup>
		<tabbar :current="0"></tabbar>
	</view>
</template>

<script>
	import arprogress from '@/components/ar-circle-progress/index.vue'
	import cCircle from "@/components/Your_Exios-Circle/Your_Exios-Circle.vue"
	export default {
		components: {
			arprogress,
			cCircle
		},
		data() {
			return {
				show1:false,
				show: true,
				show2:false,
				scrollLeft:20,
				tz:157.84,
				sl:258,
				list: [{
						name: '全身'
					},
					{
						name: '背部'
					},
					{
						name: '手臂'
					},
					{
						name: '肩部'
					},
					{
						name: '胸部'
					},
					{
						name: '肩膀和腹部'
					},
				]
			};
		},
		methods:{
			scroll(e){
				this.scrollLeft=e
			}
		}
	}
</script>

<style lang="scss">
	.con {
		position: relative;
		padding: 40rpx 32rpx 0;

		&__title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			line-height: 45rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10rpx 31rpx 8rpx;

			&__icon {
				width: 32rpx;
				height: 28rpx;
			}
		}

		&__top {
			padding: 0 8rpx;
			margin-bottom: 32rpx;

			&__title {
				font-family: SourceHanSansCN;
				font-weight: bold;
				font-size: 60rpx;
				color: #000000;
				line-height: 60rpx;
			}

			&__titlebg {
				width: 128rpx;
				height: 40rpx;
				margin-left: 12rpx;
			}

			&__ts {
				width: 32rpx;
				height: 32rpx;
			}

			&__tip {
				font-family: SourceHanSansCN;
				font-weight: 300;
				font-size: 24rpx;
				color: #333333;
				line-height: 24rpx;
				margin-top: 24rpx;
			}
		}

		&__tbox {
			height: 292rpx;
			padding: 0 32rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(217, 217, 217, 0.5);
			border-radius: 28rpx 148rpx 28rpx 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 48rpx;

			&__l {
				display: flex;

				&__line {
					width: 4rpx;
					height: 96rpx;
					background: #FFD2C3;
					margin-right: 20rpx;
					margin-top: 6rpx;
				}

				.bgafd {
					background: #AFDEFB;
				}

				&__text {
					font-family: SourceHanSansCN;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 24rpx;
					margin-right: 20rpx;
				}

				&__btn {
					width: 86rpx;
					height: 34rpx;
					background: #FFFFFF;
					border-radius: 18rpx;
					border: 1rpx solid #E5E5E5;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #333333;
					line-height: 28rpx;
				}

				&__icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
				}

				&__num {
					font-family: D-DIN-Bold;
					font-weight: bold;
					font-size: 56rpx;
					color: #333333;
					line-height: 56rpx;

					&__xs {
						font-size: 32rpx;
						line-height: 32rpx;
					}
				}

				&__unit {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 39rpx;
					margin-left: 7rpx;
					margin-right: 9rpx;
				}
			}

			.mt30 {
				margin-top: 30rpx;
			}

			&__r {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 232rpx;
				height: 232rpx;
				flex-direction: column;

				&__num {
					font-family: D-DIN-Bold;
					font-weight: bold;
					font-size: 68rpx;
					color: #155BEB;
					line-height: 68rpx;
				}

				&__num1 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 33rpx;
					margin-bottom: 5rpx;
					margin-left: 3rpx;
				}

				&__text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 33rpx;
				}
			}
		}

		&__dlbox {
			width: 208rpx;
			height: 208rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(217, 217, 217, 0.5);
			border-radius: 28rpx;
			margin-bottom: 32rpx;

			&__bg {
				width: 208rpx;
				height: 132rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 18rpx;

			}

			&__title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 33rpx;
				text-align: center;
			}
		}

		&__xlbox {
			height: 126rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(217, 217, 217, 0.5);
			border-radius: 28rpx;
			display: flex;
			align-items: center;
			padding: 0 32rpx 0 24rpx;
			margin-bottom: 32rpx;

			&__icon {
				width: 68rpx;
				height: 68rpx;
				background: #E3F9F8;
				border-radius: 20rpx;
				margin-right: 24rpx;
			}

			&__more {
				width: 52rpx;
				height: 52rpx;
			}

			&__name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}

			&__time {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 33rpx;
				margin-top: 4rpx;
			}
		}
	}

	.btbg {
		width: 276.05rpx;
		height: 90.93rpx;
	}

	.popbox {
		width: 750rpx;
		height: 840rpx;
		position: relative;

		&__bg {
			width: 750rpx;
			height: 840rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		&__bg1 {
			width: 688rpx;
			height: 342rpx;
			position: absolute;
			left: 42rpx;
			top: 0;
			z-index: 3;
		}

		&__bg2 {
			width: 606rpx;
			height: 708rpx;
			position: absolute;
			left: 72rpx;
			top: 50rpx;
			z-index: 2;
		}

		&__bg3 {
			width: 219rpx;
			height: 220rpx;
			position: absolute;
			right: 39rpx;
			top: 20rpx;
			z-index: 2;
		}

		&__con {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 590rpx;
			position: absolute;
			left: 80rpx;
			top: 58rpx;
			z-index: 4;

			&__title {
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: bold;
				font-size: 40rpx;
				color: #B32F00;
				line-height: 40rpx;
				padding: 30rpx 0;
			}

			&__content {
				width: 494rpx;
				height: 480rpx;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 48rpx;
				margin-top: 40rpx;
			}

			&__btn {
				width: 284rpx;
				height: 92rpx;
				background: linear-gradient(180deg, #D94033 0%, #F65C2E 100%);
				box-shadow: inset 0rpx 10rpx 0rpx 0rpx rgba(251, 37, 21, 0.59);
				border-radius: 58rpx;
				border: 8rpx solid rgba(255, 255, 255, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 54rpx;
				margin-top: 36rpx;
			}

			&__cha {
				width: 48rpx;
				height: 48rpx;
				margin-top: 100rpx;
			}
		}
	}

	.circle {
		width: 184rpx;
		height: 184rpx;
		border-radius: 50%;
		background-color: #fff;
		border: 24rpx solid #afb4db;
		clip-path: polygon(50% 50%, 100% 0, 50% 0);
	}
	.popbox1{
		padding: 30rpx;
	}
</style>